<template>
  <vue-modal
    @submitData="confirmCover"
    modalTitle="请完成如下配置"
    modalName="selectCoverModal"
    modalWidth="500"
    ref="selectCoverModal">
    <div slot="content">
      <h3 class="h3-cover">上传文章封面</h3>
      <el-row>
        <el-col :span="22" :offset="1" >
          <div class="el-upload-box">
            <span class="operate-tip">上传封面</span>
            <el-upload
              class="avatar-uploader"
              action="http://api.tsinglog.online/upload/uploadImage"
              :headers="myHeaders"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="el-image-box">
            <span class="operate-tip">已上传的封面</span>
            <el-image class="has-been-uploaded-image" v-if="uploadedUrl" :src="uploadedImageUrl" fit="contain"></el-image>
            <i class="image-else" v-else>未上传封面</i>
          </div>
        </el-col>
      </el-row>
      <h3 class="h3-save-type">保存类型</h3>
      <el-radio-group class="save-type-radio" v-model="release">
        <el-radio-button :label="0">保存草稿</el-radio-button>
        <el-radio-button :label="1">发布文章</el-radio-button>
      </el-radio-group>
      <el-checkbox
        v-if="release===1 && !entityFromParent.ifExistedInCarousel"
        v-model="needOperateFlag"
        class="ckb-put-in">加入轮播图</el-checkbox>
      <el-checkbox
        v-if="release===1 && entityFromParent.ifExistedInCarousel"
        v-model="needOperateFlag"
        class="ckb-put-in">重新加入轮播图</el-checkbox>
      <h3 class="h3-input-summary">文章简介</h3>
      <el-input
        type="textarea"
        :rows="4"
        maxLength="100"
        placeholder="请输入文章简介"
        class="input-summary"
        v-model="summary"></el-input>
    </div>

  </vue-modal>
</template>

<script>
  import VueModal from 'components/common/modal/VueModal';

  import {IMAGE_SERVER_URL} from "../../../common/const";

  export default {
    name: "SelectCoverTemplate",
    data() {
      return {
        needOperateFlag: true,
        release: 1,
        summary: '',
        uploadedUrl: '',
        myHeaders: {
          Authorization: `Bearer ${this.$store.state.token}`
        }
      }
    },
    props: {
      // 回显的时候会从父组件那里传递过来的回显的对象信息
      entityFromParent: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    methods: {
      // 点击了模态框中的确认按钮后，这个方法会被调用
      confirmCover() {
        /* 调用的时候将uploadedUrl和release值传递给父组件，另外还需要根据needOperateFlag和
              entityFromParent中的ifExistedInCarousel的值进行判断，输出一个optionFlag给父组件，具体的逻辑如下：
         *      1.optionFlag取值相关
         *          1.1.optionFlag为0时，表示不对文章对应的轮播图信息进行任何操作
         *          1.2.optionFlag为1时，表示将文章首次放到轮播图中（对轮播图进行新增操作）
         *          1.3.optionFlag为2时，表示将文章非首次放到轮播图中（对轮播图进行修改操作）
         *          1.4.optionFlag为3时，表示将文章对应的轮播图信息删除
         *      2.needOperateFlag和entityFromParent中的ifExistedInCarousel的值与optionFlag的关系
         *          2.1.新增文章时，release为1（文章直接发布），那么optionFlag为1；为0时（文章不发布），optionFlag为0
         *          2.2.更新文章时，release为0（文章不发布）时
         *              2.2.1.当ifExistedInCarousel为true时（修改前已经放到轮播图中了），optionFlag为3，将原来的记录删除
         *              2.2.2.当ifExistedInCarousel为false时（修改前没有放到轮播图中），optionFlag为0，不进行操作
         *          2.3.更新文章时，release为1时（文章直接发布）
         *              2.3.1.ifExistedInCarousel为true时（修改前已经放到轮播图中了），逻辑如下：
         *                  2.3.1.1.needOperateFlag为true时（需要重置轮播图），optionFlag为2；
         *                  2.3.1.2.needOperateFlag为false时（不需要重置），optionFlag为0
         *              2.3.2.ifExistedInCarousel为false时（修改前没有放到轮播图中），逻辑如下：
         *                  2.3.2.1.needOperateFlag为true时（需要加入轮播图），optionFlag为1；
         *                  2.3.2.2.needOperateFlag为false时（不需要加入轮播图），optionFlag为0
         */
        let optionFlag = -1;
        // 是否是新增操作，true为新增，false为修改
        let insertFlag = this.entityFromParent.ifExistedInCarousel == null;
        if (insertFlag) { // 新增的情况
          if (this.release === 1) {
            optionFlag = 1;
          } else if (this.release === 0) {
            optionFlag = 0;
          } else {
            this.$message.error("参数异常，请检查");
            return;
          }
        } else { // 修改的情况
          if (this.release === 0) {
            if (this.entityFromParent.ifExistedInCarousel) {
              optionFlag = 3;
            } else {
              optionFlag = 0;
            }
          } else if (this.release === 1) {
            if (this.entityFromParent.ifExistedInCarousel) {
              if (this.needOperateFlag) {
                optionFlag = 2;
              } else {
                optionFlag = 0;
              }
            } else {
              if (this.needOperateFlag) {
                optionFlag = 1;
              } else {
                optionFlag = 0;
              }
            }
          } else {
            this.$message.error("参数异常，请检查");
            return;
          }
        }
        this.$emit("confirmCover", this.uploadedUrl, this.release, this.summary, optionFlag);
      },
      /**
       * 上传成功后的回调
       */
      handleAvatarSuccess(res, file) {
        if (res.code == 1) {
          // 回显上传图片
          this.uploadedUrl = res.data.imgUrl;
        } else {
          this.$message({
            type: 'error',
            message: res.message
          });
        }
      },
      /**
       * 关闭模态框
       */
      closeModal() {
        this.$refs.selectCoverModal.closeModal();
      }
    },
    computed: {
      uploadedImageUrl() {
        return IMAGE_SERVER_URL + this.uploadedUrl;
      }
    },
    watch: {
      "entityFromParent.selectedCoverUrl": function(newValue) {
        if (newValue != '' && newValue != null) {
          this.uploadedUrl = newValue;
        }
      },
      "entityFromParent.release": function(newValue) {
        if (newValue) {
          this.release = newValue;
        }
      },
      "entityFromParent.summary": function(newValue) {
        if (newValue) {
          this.summary = newValue;
        }
      }
    },
    components: {
      VueModal
    },
  }
</script>

<style scoped>

  .h3-cover,.h3-save-type,.h3-input-summary {
    margin-left: 10px;
    margin-bottom: 20px;
  }
  .h3-save-type,.h3-input-summary {
    margin-top: 20px;
  }
  .save-type-radio {
    margin-left: 45px;
  }
  .input-summary {
    display: block;
    margin: 0 auto;
    width: 95%;
  }
  .el-col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .avatar-uploader {
    display: inline-block;
    width: 200px;
  }

  .el-upload-box,.el-image-box {
    display: inline-block;
    text-align: center;
  }

  .has-been-uploaded-image {
    width: 178px;
    height: 178px;
    display: inline-block;
    border: 1px dashed #d9d9d9;
    border-radius: 5px;
  }
  .has-been-uploaded-image:hover {
    border-color: #66B1FF
  }
  .image-else {
    width: 178px;
    height: 178px;
    display: inline-block;
    border: 1px dashed #d9d9d9;
    line-height: 178px;
    text-align: center;
    vertical-align: bottom;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    font-style: normal;
  }
  .operate-tip {
    display: block;
    margin-bottom: 10px;
  }

  .ckb-put-in {
    margin-left: 30px;
  }
</style>

<style>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
